<template>
	<view class="content textwhite14">

		<view class="column marginTop width100">
			<swiper :circular="true" :indicator-dots="true" class="width100"
				style="height: 720rpx; border-radius: 24rpx; overflow: hidden;">
				<block v-for="(item,i) in imageList" :key="i">
					<swiper-item style="height: 100%; width: 100%;">
						<image class="image-item" mode="aspectFill" :src="item" style="z-index: 0;" />
					</swiper-item>
				</block>
			</swiper>
		</view>

		<view class="textBg padding line add-img" @click="photo()">
			<image class="icon-small" src="../../static/small-picture.png"></image>
			<view class="marginLeft"> 添加多图</view>
		</view>
		<textarea style="height: 1px; visibility: hidden; " @input="inputText"></textarea>
		<view class="textBg padding radius-24">
			<input v-model="aiDetail.name" class="width100" @input="inputText" placeholder="输入作品名称" />
			<!-- <textarea v-model="aiDetail.name" class=" width100" @input="inputText" maxlength="1000" placeholder="输入作品名称" /> -->
		</view>
		<view class="textBg padding radius-24">
			<textarea v-model="aiDetail.content" class=" width100" @input="inputText1" maxlength="1000"
				placeholder="分享创作想法与作品简介，更能在广场中被推荐、展示、搜索哦..." />
			<view class="rightLabel">
				<text> {{content.length}}/1000 |</text> <text>清除</text>
			</view>
		</view>
		<view v-show="goodContent" class="textBg">
			<text class="textwhite16 marginTop">正向指令 </text>
			<view class=" padding marginTop textwhite16">
				<text> {{goodContent}}</text>
			</view>
		</view>

		<view class="line textBg padding radius-24" @click="showDialog1=true">
			<view v-if="category" class="bigEmpty">
				<text class="button-blue paddingSmall">
					{{category.name}}&nbsp;&nbsp;<text @click.stop="category=null">X</text>
				</text>
			</view>

			<view v-if="!category" class="bigEmpty">请选择标签(选填)</view>
			<view>
				<image class="icon-small " src="/static/down-arrow.png"></image>
			</view>
		</view>

		<view class="textBg radius-24">
			<view class="padding" style="border-bottom: 1px solid rgba(255, 255, 255, .6);"> <text
					class="textwhite16">创作信息</text>
			</view>
			<view class="padding"> <text class="textwhite16">创作者</text> <text
					class="textwhite16 floatRight">{{author}}</text>
			</view>
			<view class="padding"> <text class="textwhite16">创建时间</text> <text
					class="textwhite16 floatRight">{{createTime}}</text></view>
			<view class="padding"> <text class="textwhite16">模型主题</text> <text
					class="textwhite16 floatRight">{{module}}</text></view>
			<view class="padding"> <text class="textwhite16">画面尺寸</text> <text
					class="textwhite16 floatRight">{{size}}</text></view>
			<view class="padding"> <text class="textwhite16">风格选择</text> <text
					class="textwhite16 floatRight">{{style}}</text></view>
			<view class="padding"> <text class="textwhite16">Seed(种子)</text> <text
					class="textwhite16 floatRight">无</text></view>
			<view class="padding"> <text class="textwhite16">图片提示</text> <text class="textwhite16 floatRight">无</text>
			</view>
		</view>

		<view class="bg-black-circle-rect text-gray-14 marginTop2" style="padding: 30rpx 24rpx;">
			<view class="line" style="margin-bottom: 20rpx;">
				<view class="bigEmpty"> 创作信息公开范围 </view>
				<view @click="click(2)" class="views-box"> {{visLabel}}
					<image v-show="showDialog" class="icon-small " src="/static/up-arrow.png"></image>
					<image v-show="!showDialog" class="icon-small " src="/static/down-arrow.png"></image>
				</view>
			</view>
			<view class="line marginTop marginTop">
				<view class="bigEmpty"> 禁止下载原图 </view>
				<view>
					<switch style="transform:scale(0.7)" @change="changeOriginFun" :checked="originFun"></switch>
				</view>
			</view>
			<view class="lineGray marginTop"></view>
			<view class="line padding" style="line-height: 30rpx; margin-top: 30rpx;" @click="submit()">
				立即发布
			</view>
		</view>

		<view class="dialogBg" v-show="showDialog" style="position: fixed; bottom: 0rpx; width: 100%; height: 100vh;">

			<view style="position: fixed; bottom: 0rpx; width: 100%; ">

				<view class="line padding margin">
					<view class="bigEmpty"></view>
					<view class="column bg-black-circle-rect " style="width: 400rpx;">
						<view class="padding" @click="vis(1)">所有人可见</view>
						<view class="padding" @click="vis(2)">仅关注可见</view>
						<view class="padding" @click="vis(3)">仅一键同款可见</view>
						<view class="padding" @click="vis(4)">仅一键同款+3积分可见</view>
						<view class="padding" @click="vis(5)">仅一键同款+5积分可见</view>
					</view>
				</view>

				<!--start 假的图层用来占位 -->
				<view style="visibility: hidden;" class="bg-black-circle-rect text-gray-14 padding ">
					<view class="line ">
						<view class="bigEmpty"> 创作信息公开范围 </view>
						<view class="views-box"> 所有人可见
							<image v-show="!showDialog" class="icon-small " src="/static/up-arrow.png"></image>
							<image v-show="showDialog" class="icon-small " src="/static/down-arrow.png"></image>
						</view>
					</view>
					<view class="line marginTop marginTop">
						<view class="bigEmpty"> 禁止下载原图 </view>
						<view>
							<switch style="transform:scale(0.7)"></switch>
						</view>
					</view>
					<view class="lineGray marginTop"></view>
					<view class="line padding">
						立即发布
					</view>
				</view>
				<!-- end 假的图层用来占位 -->
			</view>
		</view>

		<view class="centerGroup dialogBg" style="z-index: 100000; " v-show="showDialog1">
			<view class=" dialog-bottom-full-width padding">
				<view class="line textBlack18">
					<view class="bigEmpty marginLeft">合集标签</view>
					<view class="centerGroup marginRight textblack14" @click="showDialog1=false">X</view>
				</view>
				<view class="bigEmpty line-no marginLeft " style="z-index: 100000; flex-wrap: wrap;">
					<view :class="{bgMoreColor:indexGroup==index,textWhite:indexGroup==index}"
						@click="changeGroup(item)" v-for="(item,index) in categoryList"
						class=" paddingSmall btn-v30 btnGray textblack8 marginRight marginBottom line">
						&nbsp{{item.name}}&nbsp
					</view>
				</view>
				<view class="centerGroup marginTop">
					<!-- 	<view class="centerGroup ok marginLeft textwhite14" @click="okDialog">确认</view> -->
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import request from "/common/request.js"
	export default {
		data() {
			return {
				aiDetail: '', //ai详情信息
				indexGroup: 0,
				showDialog1: false,
				categoryList: [],
				category: null,
				type: 0,
				id: 0,
				x: "x",
				originFun: false,
				imageList: [

				],
				imageList1: [

				],
				visList: ["", "所有人可见", "仅关注可见", "仅一键同款可见", "仅一键同款+3积分可见", "仅一键同款+5积分可见"],
				sizeTab1Index: 1,
				sizeTab2Index: 1,
				styleIndex: 1,
				moduleIndex: 1,
				name: "",
				status: 1,
				label: "",
				visible: 1,
				goodContent: "",
				visLabel: "所有人可见",
				content: "",
				createTime: "",
				author: "",
				module: "",
				size: "",
				style: "",
				returnData: null,
				plateUserId: "",
				showDialog: false,
				selectImage: ""
			}
		},
		onShareAppMessage(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},
		// 自定义页面的分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '设辑-产品设计智能生成AI',
				path: '/pages/HomePage/HomePage',
				imageUrl: '/static/black-logo.png'
			}
		},

		onHide: function() {
			console.log("onhide")
		},
		onUnload: function() {
			console.log("onUnload")
			uni.$off('add')
		},
		onLoad: function(query) {
			this.id = query.id;
			this.oid = query.id;
			this.goodContent = query.goodContent;
			this.moduleIndex = query.moduleIndex;
			this.styleIndex = query.styleIndex;
			this.sizeTab2Index = query.sizeTab2Index;
			this.sizeTab1Index = query.sizeTab1Index;
			this.createTime = query.createTime;
			this.size = query.size;
			this.badContent = query.badContent;
			this.module = query.module;
			this.style = query.style;
			this.author = uni.getStorageSync("name");
			//this.imageList=query.imageList
			console.log(query.image)
			this.imageList.push(query.image)
			uni.$on('add', res => {
				this.imageList.push(res.data)
				console.log(res.data)
			})
			this.requstCategoryData()
			this.requestAIDetail()
		},
		onReady: function() {

		},
		methods: {

			inputText: function(e) {
				console.log(e.detail.value)
				this.name = e.detail.value;
			},

			inputText1: function(e) {
				console.log(e.detail.value)
				this.content = e.detail.value;
			},


			changeGroup(num) {
				this.showDialog1 = false
				this.category = num

				console.log(num)
			},

			requestAIDetail() {
				const that = this;
				const url = getApp().globalData.apiUrl + "/api/v1/pictureCollection/" + this.id;
				request(url, "GET", {}, uni.getStorageSync("token"))
					.then(function(res) {
						console.log('返回正确回调', res)
						that.aiDetail = res.data;
						that.user = res.data.user
						that.returnData = res.data.job;
						that.name = res.data.name;
						that.content = res.data.content;
						that.imageList = res.data.formatImages
						that.sizeTab1Index = res.data.job.width2height
						if (!that.sizeTab1Index) {
							that.sizeTab1Index = 1
						}
						that.createTime = res.data.job.createTime
						that.moduleIndex = res.data.job.module
						that.styleIndex = res.data.job.style
						that.goodContent = res.data.job.cmd
						that.attachImages = res.data.job.attachImages
						var size = "1:1";
						var sizeArray = [
							"1:1",
							"1:1",
							"1:2",
							"4:3",
							"3:4",
							"16:9",
							"9:16"
						]
						that.size = sizeArray[that.sizeTab1Index]
						var module = "精彩"
						var moduleArray = [
							"1:1",
							"1:1",
							"1:2",
							"1:2",
							"精彩",
							"细腻",
							"动漫",
							"创意",
							"照片"
						]

						that.module = moduleArray[that.moduleIndex]
						console.log(that.module)
						var style = "长焦镜头"
						var styleArray = [
							"长焦镜头",
							"长焦镜头",
							"手绘背景",
							"CG数字渲染",
							"哑光颜",
							"X光片",
							"矢量设计海报",
							"极简线条画",
							"炭笔画",
							"更多"
						]
						that.style = styleArray[that.styleIndex]
						that.setH()
					}, function(err) {
						console.log('返回错误回调', err)
					})
			},

			requstCategoryData() {
				const that = this;
				const url = getApp().globalData.apiUrl + "/api/v1/category/all";
				request(url, "GET", {
						page: 0,
						size: 100
					}, uni.getStorageSync("token"))
					.then(function(res) {
						console.log('返回正确回调', res)
						uni.setStorageSync("category", res.data)
						var category = uni.getStorageSync("category");

						that.categoryList.push(...category)

					}, function(err) {
						console.log('返回错误回调', err)
					})
			},

			deletePic(index) {
				console.log("index" + index)
				this.imageList.splice(index, 1)
			},

			vis(num) {
				this.visible = num
				this.showDialog = false
				this.visLabel = this.visList[num]
			},
			chooseTheImg() {
				uni.chooseImage({
					count: 1, //图片可选择数量
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera', '海报图库'], //album 从相册选图，camera 使用相机，默认二者都有。
					success: res => {
						let imgFiles = res.tempFilePaths //图片的本地文件路径列表
						console.log('本地地址', imgFiles)
						this.imageList.push(imgFiles[0]);
					}
				})
			},
			photo() {
				console.log("kkkk11")
				//this.chooseTheImg();
				uni.navigateTo({
					url: "/pages/MyPhoto/MyPhoto?openType=4"
				})
			},

			click(id) {
				switch (id) {
					case 1:
						console.log("mmm")
						break
					case 2:
						this.showDialog = true
						break
				}
			},
			submit() {
				if (!this.imageList) {
					uni.showToast({
						title: "请选择图片"
					})
					return;
				}
				// if (!this.name) {
				// 	uni.showToast({
				// 		title: "请选择填写作品名称"
				// 	})
				// 	return;
				// }
				// if (!this.content) {
				// 	uni.showToast({
				// 		title: "请选择填写作品内容"
				// 	})
				// 	return;
				// }

				const that = this
				for (var i = 0; i < this.imageList.length; i++) {
					var item = that.imageList[i];
					if (item.startsWith("http")) {
						that.imageList1.push(item)
						if (that.imageList1.length == that.imageList.length)
							that.uploadMsg()
						continue
					}

					console.log("item:" + item)
					const url = getApp().globalData.apiUrl1 + "/api/v1/file/upload";
					uni.uploadFile({
						url: url,
						filePath: item,
						name: 'file',
						formData: {}, //其它上传参数
						// header: {
						// 	"token": uni.getStorageSync('Token')
						// },
						success: (res) => {
							const data = JSON.parse(res.data);
							console.log("picture:" + data.data)
							that.imageList1.push(data.data)
							console.log(that.imageList1.length)
							if (that.imageList1.length == that.imageList.length)
								that.uploadMsg()
						},
						fail: error => {
							uni.showModal({
								title: '网络中断，上传失败',
								content: "请重试",
								showCancel: false
							});
							uni.hideLoading();
						},
						complete: () => {}
					});
				}

			},
			changeOriginFun(e) {
				this.originFun = e.detail.value;
				if (his.originFun) {
					this.status = 2;
				} else {
					this.status = 1;
				}
				console.log(e.detail)
			},
			uploadMsg() {

				if (this.category) {
					this.label = this.category.id
				}
				const that = this;
				const url = getApp().globalData.apiUrl + "/api/v1/pictureCollection/" + this.id
				request(url, "PUT", {
						name: this.aiDetail.name,
						content: this.aiDetail.content,
						status: that.status,
						label: this.label,
						formatImages: this.imageList1,
						type: 1,
						visible: this.visible,
						jobId: this.id,
					}, uni.getStorageSync("token"))
					.then(function(res) {
						uni.showToast({
							title: "发表成功"
						})
						uni.switchTab({
							url: "/pages/HomePage/HomePage"
						})
						console.log('返回正确回调', res)
					}, function(err) {

						console.log('返回错误回调', err)
					})

			},
		}
	}
</script>




<style>
	@import "../../common/uni.css";

	.views-box {
		border: 1px solid #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.radius-24 {
		border-radius: 24rpx;
		overflow: hidden;
	}

	.add-img {
		background: linear-gradient(140deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 100%);
		opacity: 0.6;
		border: 2rpx solid;
		/* border-image: linear-gradient(49deg, rgba(255, 255, 255, 0.6000000238418579), rgba(255, 255, 255, 0.30000001192092896), rgba(255, 255, 255, 0.699999988079071), rgba(255, 255, 255, 0)) 2 2; */
		border-radius: 24rpx;
	}

	.textBg {
		border-radius: 14rx;
		background: rgba(150, 140, 150, 0.3);
	}

	.image-item {
		width: 100%;
		height: 100%;
	}

	.box-bottom {

		margin-top: -120rpx;
		z-index: 8;
		padding-bottom: 20rpx;
		height: 120rpx;

	}

	.content {
		min-height: 100vh;
		padding: 15rpx;
		background: linear-gradient(166deg, #310BE8 0%, #0027FE 34%, #8200FF 64%, #D703FF 99%);



	}

	.content view {
		margin-bottom: 50rpx;
	}
</style>